<!DOCTYPE html>
<script src="../include.js"></script>
<script>
    test(() => {
        const labelableElements = ["input", "meter", "output", "progress", "select", "textarea"];
        for (const tagName of labelableElements) {
            const element = document.createElement(tagName);
            element.id = `${tagName}Id`;
            const label = document.createElement("label")
            label.htmlFor = `${tagName}Id`;
            document.body.appendChild(label);
            document.body.appendChild(element);
            const labels = element.labels;
            println(`${tagName}.labels.length: ${labels.length}`);
            println(`${tagName}.labels[0] === label: ${labels[0] === label}`);
            println(`${tagName}.labels always returns the same object: ${labels === element.labels}`);
            document.body.removeChild(label);
            document.body.removeChild(element);
        }

        const inputElement = document.createElement("input");
        inputElement.type = "hidden";
        inputElement.id = "inputId"
        const label = document.createElement("label")
        label.htmlFor = 'inputId';
        document.body.appendChild(label);
        document.body.appendChild(inputElement);
        println(`input.labels returns null if input type is hidden: ${inputElement.labels === null}`);
        inputElement.type = "text";
        const labels = inputElement.labels;
        println(`input.labels.length after input type is changed from hidden: ${labels.length}`);
        println(`input.labels[0] === label after input type is changed from hidden: ${labels[0] === label}`);
        document.body.removeChild(label);
        document.body.removeChild(inputElement);
    });
</script>
